<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="static/assets/global/plugins/jquery-1.11.0.min.js"></script>
    <link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="static/assets/global/css/components.css" rel="stylesheet" type="text/css" />
    <link href="static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css" />
    <title>Document</title>
</head>

<body>
    <div class="content">
        <h3 class="form-title">商品列表浏览</h3>
        <!-- 响应式的table界面 -->
        <div class="table_responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>商品名</th>
                        <th>商品图片</th>
                        <th>商品描述</th>
                        <th>商品价格</th>
                        <th>商品库存</th>
                        <th>商品销量</th>
                    </tr>
                <tbody id="container">

                </tbody>
                </thead>
            </table>
        </div>

    </div>
</body>
<script>
    var g_itemList = []
    $("document").ready(function () {
        $.ajax({
            type: 'GET',
            url: "http://localhost:8090/longer/item/list",
            //允许跨域授信请求
            xhrFields: { withCredentials: true },
            success: function (data) {
                if (data.status === "success") {
                    g_itemList = data.data
                    reloadDom()
                } else {
                    alert("获取商品失败" + data.data.errorMsg)
                }
            },
            error: function (data) {
                alert("获取商品失败," + data.responseText)
            }
        });
        //不可以冒泡往上传递
        return false

    });

    function reloadDom() {
        for (var i = 0; i < g_itemList.length; i++) {
            var itemVO = g_itemList[i]
            var dom = "<tr data-id='"+itemVO.id+"' id='itemDetail"+itemVO.id+"'>" + "<td>" +itemVO.title+ "</td>"+ "<td><img style='width:100px;height:auto;' src='" +itemVO.imgUrl+ "'></td>"+ "<td>" +itemVO.price+ "</td>"+ "<td>" +itemVO.description+ "</td>"+ "<td>" +itemVO.stock+ "</td>"+ "<td>" +itemVO.sales+ "</td>" + "</tr>"
            $("#container").append($(dom))
            $("#itemDetail"+itemVO.id).on("click",function(e){
                window.location.href="getItem.html?id="+$(this).data("id")
            })
           
        }
    }
</script>

</html>